// 系统布局动画
.system-enter-active,
.system-leave-active {
  --base-time: .3s;
  --enterDelay: 0s;
  transition-property: all;
  transition-duration: calc(var(--base-time));
  transition-timing-function: ease;
  transition-delay: 0;

  .gd-left-enter,
  .gd-right-enter,
  .gd-bottom-enter,
  .gd-top-enter,
  .gd-center-enter {
    filter: blur(0px);
    transition-property: all;
    transition-duration: calc(var(--base-time) - var(--enterDelay));
    transition-timing-function: ease;
  }
}

.system-enter-from,
.system-leave-to {

  .gd-left-enter {
    transition-delay: var(--enterDelay);
    opacity: 0;
    transform: translateX(calc((100% + var(--jiange, 20px)) * -1)) scale(0);
    filter: blur(100px);
  }

  .gd-right-enter {
    transition-delay: var(--enterDelay);
    opacity: 0;
    transform: translateX(calc(100% + var(--jiange, 20px))) scale(0);
    filter: blur(100px);
  }

  .gd-bottom-enter {
    transition-delay: var(--enterDelay);
    opacity: 0;
    transform: translateY(100%) scale(0);
    filter: blur(100px);
  }

  .gd-top-enter {
    transition-delay: var(--enterDelay);
    opacity: 0;
    transform: translateY(-100%) scale(0);
    filter: blur(100px);
  }

  .gd-center-enter {
    transition-delay: var(--enterDelay);
    opacity: 0;
    transform: scale(0);
    filter: blur(100px);
  }
}

// 弹窗布局
.pop-enter-active,
.pop-leave-active {
  --tr: all .2s ease;
  transition: var(--tr);

  .center {
    transition: var(--tr);
  }
}

.pop-enter-from,
.pop-leave-to {
  opacity: 0;

  .center {
    transform: scale(0);
  }
}

// 蒙层动画
.mask-enter-active,
.mask-leave-active {
  --tr: all .3s ease;
  transition: var(--tr);

  .content {
    transition: var(--tr);
    transform: scale(1);
  }
}

.mask-enter-from,
.mask-leave-to {
  opacity: 0;

  .content {
    transform: scale(0);
  }
}

// 右侧进入
.right-in-enter-active,
.right-in-leave-active {
  --tr: all .3s ease;
  transition: var(--tr);
}

.right-in-enter-from,
.right-in-leave-to {
  transform: translateX(100%) scale(0);
  opacity: 0;
  filter: blur(100px);
}

// 左侧进入
.left-in-enter-active,
.left-in-leave-active {
  --tr: all .3s ease;
  transition: var(--tr);
}

.left-in-enter-from,
.left-in-leave-to {
  transform: translateX(-100%) scale(0);
  opacity: 0;
  filter: blur(100px);
}